// 监控
import Page from "@/components/common/Page";
import { View, WebView } from "@tarojs/components";

import { useUpdateEffect } from "ahooks";
import { useRouter } from "@tarojs/taro";

import FooterNav from "./components/FooterNav";
import ByEmpty from "@/components/ui/ByEmpty";

import useFetch from "@/hooks/useFetch";
import ApiCrm from "@/api/crm";

import ApiMokan from "@/api/mokan";

import { IntentCustomerData } from "@/types/customer";

// MKid 是projectid. MKNo是serialNumber，ExtT5 是deviceId

export default () => {
  const { params } = useRouter();
  const intentCustomerId = Number(params.intentCustomerId);

  const { data: customerData } = useFetch<{
    intentCustomer: IntentCustomerData;
  }>(ApiCrm.customerDetail, { defaultParams: [{ intentCustomerId }] });

  const { data, run: run } = useFetch<{ url: string }>(
    ApiMokan.getVideoPlayUrl,
    "POST",
    { manual: true }
  );

  // const { data: streamData, run } = useFetch<{ flv: string }>(
  //   ApiMokan.startStream,
  //   "POST",
  //   { manual: true }
  // );

  useUpdateEffect(() => {
    const { mkId } = customerData!.intentCustomer;
    run({ projectId: mkId });

    // !!mkNo &&
    //   run({
    //     intentCustomerId,
    //     serialNumber: mkNo,
    //     force: true, // 强制播放（播放中，再次发起播放）
    //     voice: true, // 声音开关
    //     resolution: 0,
    //   });
  }, [customerData]);

  return (
    <Page
      skyline
      footerSticky
      slotFooter={<FooterNav intentCustomerId={intentCustomerId} />}
    >
      {/* {streamData ? (
        <WebView
          className="h-full"
          src={`${setting.webUrl}/monitor?url=${encodeURIComponent(
            streamData.flv
          )}`}
        />
      ) : (
        <View className="flex-center h-full">
          <ByEmpty text="暂无施工现场监控" />
        </View>
      )} */}

      {data?.url ? (
        <WebView className="h-full" src={data.url} />
      ) : (
        <View className="flex-center h-full">
          <ByEmpty text="暂无施工现场监控" />
        </View>
      )}
    </Page>
  );
};
